<template>
  <div class="PersonalData">
    <el-card>
      <h3><span class="tag"></span> 过滤关键词</h3>
      <div class="searchBox">
        <div>
          <span class="txt">过滤词：</span>
          <el-input
            v-model="value"
            placeholder="请输入内容"
            clearable
            size="small"
          ></el-input>
          <el-button
            class="btn"
            icon="el-icon-search"
            size="small"
            @click="search"
            >查询搜索</el-button
          >
        </div>
        <el-button class="btn" icon="el-icon-plus" size="small" @click="add"
          >添加关键词</el-button
        >
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
        @selection-change="handleSelectionChange"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="keyword" label="过滤词"> </el-table-column>
        <el-table-column prop="address" label="处理">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="small"
              plain
              @click="del([scope.row.keyword])"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-button size="small" class="btn plcz" @click="pldel"
        >批量删除</el-button
      >
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="新增过滤词" :visible.sync="dialogVisible" width="30%">
      <div class="dialogBox">
        <el-input placeholder="请输入内容" v-model="keywordSetkeyword">
          <template slot="prepend">输入过滤词</template>
        </el-input>
        <br />
        <br />
        <el-upload
          class="upload-demo"
          :http-request="upLoad"
          action
          :before-upload="beforeAvatarUpload"
          multiple
          :limit="1"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传文件</el-button>
          <!-- <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div> -->
        </el-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" class="btn" @click="keywordSetkeywordBtn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  keywordKeywordList,
  keywordDel,
  keywordSetkeyword,
  keywordBatchKeyword,
} from "@/api/operationManagement";
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      value: "",
      tableData: [{ sd: 1 }, { cs: 2 }],
      total: 0,
      page: 1,
      pageSize: 10,
      multipleSelection: [],
      dialogVisible: false,
      keywordSetkeyword: "",
      fileList: [],
    };
  },
  methods: {
    //选择表格
    handleSelectionChange(value) {
      this.multipleSelection = value.map((item) => {
        return item.keyword;
      });
    },
    //处理不通过
    operation(obj) {},
    async getList() {
      this.loading = true;
      const res = await keywordKeywordList({
        keyWord: this.value,
        page: this.page,
        pageSize: this.pageSize,
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.total = parseInt(res.data.total);
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
    //删除关键词
    async del(keywords) {
      const res = await keywordDel({
        keywords,
      });
      if (res.code == 0) {
        this.$message.success("删除成功！");
        this.getList();
      }
    },
    pldel() {
      if (this.multipleSelection.length == 0) {
        this.$message.error("请最少选择一条关键词！");
        return;
      } else {
        this.del(this.multipleSelection);
      }
    },
    beforeAvatarUpload(file) {
      const isTXT = file.type === "text/plain";
      if (!isTXT) {
        this.$message.error("上传文件只能是 TXT 格式!");
      }
      return isTXT;
    },
    async upLoad(file) {
      await ossToken({
        type: 7, //txt
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      let files = file.file;
      let point = files.name.lastIndexOf(".");
      let suffix = files.name.substr(point);
      let fileName = files.name.substr(0, point);
      let date = Date.parse(new Date());
      let fileNames = "/other/" + date / 1000 + suffix;
      console.log(fileNames);
      this.fileTxt = fileNames;
      // this.fileList = fileNames;
      //fileNames上传文件的名称
      //file.file上传文件的内容
      client(this.dataObj)
        .multipartUpload(fileNames, file.file)
        .then((result) => {
          //下面是如果对返回结果再进行处理，根据项目需要
          // console.log(result);
          keywordBatchKeyword({
            file: self.fileTxt,
          }).then((res) => {
            if (res.code == 0) {
              self.$message({
                message: "上传成功",
                type: "success",
              });
              self.dialogVisible = false;
            }
          });
        })
        .catch((err) => {
          self.$message.error("上传失败");
        });
    },
    add() {
      this.dialogVisible = true;
      this.keywordSetkeyword = "";
    },
    async keywordSetkeywordBtn() {
      const res = await keywordSetkeyword({
        keywords: this.keywordSetkeyword,
      });
      if (res.code == 0) {
        this.$message.success("添加成功！");
        this.getList();
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.PersonalData {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 200px;
    }
  }
  .plcz {
    margin-left: 0 !important;
  }
}
</style>